<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			title="尚图" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view slot="gBody" class="grace-body">
			<view class="top-button-container">
				<text v-on:click="toTab">取消</text>
				<text class="pulish-button" v-if="moment.id == ''" @click="publish">发布</text>
				<text class="pulish-button" v-if="moment.id != ''" @click="publish">更新</text>
			</view>
			<!--content -->
			<view class="release-content">
				<view>
					<textarea name="content" placeholder="动态内容......" class="release-content-input"
						v-model="moment.words" />
				</view>
			</view>
			<!-- 图片选择  -->
			<view class="grace-title grace-margin-top">
				<view class="grace-title-border"></view>
				<text class="grace-title-text grace-black">请选择图片</text>
				<text class="grace-text-small grace-gray grace-icons icon-remove" @tap="clearAllImgs">清空图片</text>
			</view>
			<graceSelectImg :maxFileNumber="9" @removeImg="removeImg" @change="imgsChange" :imgLists="moment.imgs">
			</graceSelectImg>
		</view>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue';
	import graceSelectImg from "../../graceUI/components/graceSelectImg.vue";
	import {
		upload
	} from '@/api/api.js';
	import {
		add
	} from '@/api/moment.js';
	export default {
		components: {
			graceSelectImg
		},
		data() {
			return {
				textLength: 0,
				moment: {
					id: '',
					words: '',
					imgs: []
				}
			}
		},
		methods: {
			toTab() {
				uni.switchTab({
					url: "../index/index"
				});
			},
			handleInput(e) {
				this.textLength = e.detail.value.length;
			},
			publish() {
				uni.showLoading({
					title: '发布中',
					icon: 'loading'
				});
				this.batchImgs().then(() => {
					add(this.moment).then(response => {
						this.moment.id = response
						console.log("this.moment.id", this.moment.id)
						uni.showLoading({
							title: '完成',
							icon: 'success'
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}).catch(error => {
						uni.showLoading({
							title: '失败',
							icon: 'fail'
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					});
				});
			},
			batchImgs() {
				// 创建一个 Promise 数组，每个 Promise 对应一个图片上传操作
				const uploadPromises = this.moment.imgs.map((item) => {
					return new Promise((resolve, reject) => {
						upload(item.url).then(response => {
							item['response'] = response;
							console.log(response);
							console.log(item);
							resolve(); // 当上传完成时，解决 Promise
						}).catch(error => {
							reject(error); // 如果上传失败，拒绝 Promise
						});
					});
				});

				// 使用 Promise.all 等待所有的上传操作完成
				return Promise.all(uploadPromises);
			},
			clearAllImgs(){
				this.moment.imgs = []
			},
			imgsChange: function(res) {
				console.log('选择的图片数据变化了');
				console.log(res);
			},
			removeImg: function(e) {
				console.log('被删除的图片信息');
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.top-button-container {
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.release-content {
		margin-top: 40rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
	}

	.release-button {
		background: #3688FF;
		height: 50rpx;
		padding: 0 25rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 22rpx;
	}

	.release-content-input {
		height: 180rpx;
		font-size: 28rpx;
		width: 650;
		color: #666666;
		padding: 25rpx;
		line-height: 46rpx;
	}

	.pulish-button {
		background-color: #00c5ff;
		color: white;
		padding: 10rpx 20rpx 10rpx 20rpx;
		border-radius: 10rpx;
	}
</style>